<template>
  <div class="layout-header">
    <p class="system-title">{{ systemTitle }}</p>
    <i :class="isCollapse ?'el-icon-s-unfold':'el-icon-s-fold'" @click="collapse"></i>
    <div class="user">

      <el-dropdown>

        <span class="el-dropdown-link">
          <el-avatar class="avatar" icon="el-icon-user-solid"
                     :src="avatarUrl"></el-avatar>
          <span>{{ userName }}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>

        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <p @click="toUserInfo">个人信息</p>
          </el-dropdown-item>
          <el-dropdown-item>
            <p @click="logout">退出登录</p>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script type="text/javascript">
import bus from '@/common/util/bus'
import { projectTitle, axiosBeseUrl } from '@/common/config/baseConfig'

export default {
  name: 'layoutHeader',
  data () {
    return {
      avatarUrl: !this.$store.getters.userInfo.avatar || axiosBeseUrl + '/api/v1/attachment/downLoadFileById?id=' + this.$store.getters.userInfo.avatar,
      // 是否折叠菜单
      isCollapse: false,
      systemTitle: projectTitle
    }
  },
  computed: {
    userName () {
      return this.$store.getters.userInfo.nick
    }
  },
  props: {},
  methods: {
    // 折叠
    collapse () {
      this.isCollapse = !this.isCollapse
      // 触发折叠按钮事件，并向菜单页传值
      bus.$emit('collapse', this.isCollapse)
      // 触发折叠按钮事件，并向home页传值
      this.$emit('collapse', this.isCollapse)
    },
    // 退出登录
    logout () {
      this.$store.dispatch('user/logout').then(() => {
        this.$router.push({ path: '/login' })
      })
    },
    toUserInfo () {
      this.$router.push({ path: '/userInfo' })
    },
    searchAll () {
      this.$router.push({ path: '/' })
    }
  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
.system-title {
  color: #ffffff;
  font-size: 24px;
  margin-right: 10px;
  /*width: 190px;*/

}

.layout-header {
  height: 100%;
  width: 100%;
  /*background: #ffffff;*/
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-icon-s-unfold,
  .el-icon-s-fold {
    font-size: 20px;
    cursor: pointer;
    color: #ffffff;
  }

  .user {
    display: flex;
    justify-content: flex-end;
    flex: 1;

    ::v-deep .el-dropdown {
      cursor: pointer;
      color: #ffffff;

      .el-dropdown-link {
        display: flex;
        align-items: center;

        .avatar {
          margin-right: 10px;
          width: 32px;
          height: 32px;
          line-height: 32px;
        }
      }
    }
  }
}
</style>
